<template>
    <div class="yearmian">
        <Tabbar :titlename="'统计'"/>
        <div class="yearcs" ref="yearts"></div>
    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import * as echarts from 'echarts'
import Tabbar from '@/components/tabbar/tabbar.vue'
let yearts = ref()
onMounted(() => {
    let myCharts = echarts.init(yearts.value);
    // 设置实例的配置项
    myCharts.setOption({
        title: {
            text: ''
        },
        tooltip: {
            show: true,
            trigger: "item",
            formatter: "{b} <br/>占比：{c}%"
        },
        xAxis: {
            type: "value",
            show: false
        },
        yAxis: [
            {
                type: "category",
                position: "left",
                data: ["男士"],
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            },
            {
                type: "category",
                position: "right",
                data: ["女士"],
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    padding: [0, 0, 40, -60],
                    fontSize: 12,
                    lineHeight: 60,
                    color: "rgba(255, 255, 255, 0.9)",
                    formatter: "{value}" + 50 + "%",
                    rich: {
                        a: {
                            color: "transparent",
                            lineHeight: 30,
                            fontFamily: "digital",
                            fontSize: 12
                        }
                    }
                }
            }
        ],
        series: [
            {
                type: "bar",
                barWidth: 20,
                data: [50],
                z: 999,
                itemStyle: {
                    borderRadius: 10,
                    color: "#007AFE"
                },
                label: {
                    show: true,
                    color: "#E7E8ED",
                    position: "insideLeft",
                    offset: [0, -20],
                    fontSize: 14,
                    formatter: () => {
                        return `男士 50%`;
                    }
                }
            },
            {
                type: "bar",
                barWidth: 20,
                data: [100],
                barGap: "100%",
                itemStyle: {
                    borderRadius: 10,
                    color: "#FF4B7A"
                },
                label: {
                    show: true,
                    color: "#E7E8ED",
                    position: "insideRight",
                    offset: [0, -20],
                    fontSize: 14,
                    formatter: () => {
                        return `女士 50%`;
                    }
                }
            }
        ],
        // 布局设置
        grid: {
            top: 20,
            left: 50,
            right: 60,
            bottom: 0,
            containLabel: true
        }
    })
})
</script>
<style scoped lang="scss">
.yearmian{
    margin: 10px 0;
    height: 300px;
    box-sizing: border-box;
    background: url('@/assets/image/screen/dataScreensexmaincb.png');
    background-size: 100% 100%;
    .yearcs{
            height: 300px;
            padding: 20px;
    }
}

</style>